// export default()=>{


//     const STATUS_TODO = 'STATUS_TODO';
//     const STATUS_DOING = 'STATUS_DOING';
//     const STATUS_DONE = 'STATUS_DONE';
    
//     const STATUS_CODE = {
//         STATUS_TODO: '待处理',
//         STATUS_DOING: '进行中',
//         STATUS_DONE: '已完成'
//     }
//     let tasks = [{
//         id: 0,
//         status: STATUS_TODO,
//         title: '每周七天阅读五次，每次阅读完要做100字的读书笔记',
//         username: '小夏',
//         point: 10
//     }, {
//         id: 1,
//         status: STATUS_TODO,
//         title: '每周七天健身4次，每次健身时间需要大于20分钟',
//         username: '橘子🍊',
//         point: 5
//     }, {
//         id: 2,
//         status: STATUS_TODO,
//         title: '单词*100',
//         username: '┑(￣Д ￣)┍',
//         point: 2
//     }, {
//         id: 3,
//         status: STATUS_TODO,
//         title: '单词*150',
//         username: '┑(￣Д ￣)┍',
//         point: 2
//     }, {
//         id: 4,
//         status: STATUS_TODO,
//         title: '单词*200',
//         username: '┑(￣Д ￣)┍',
//         point: 2
//     }, {
//         id: 5,
//         status: STATUS_TODO,
//         title: '单词*250',
//         username: '┑(￣Д ￣)┍',
//         point: 2
//     }]
    
//     handleDragStart = (e) => {
//         this.props.onDragStart(this.props.id);
//     }
//     let { id, title, point, username, active, onDragEnd } = this.props;

    
//     return (
//         <div 
//             onDragStart={this.handleDragStart}
//             onDragEnd={onDragEnd}
//             id={`item-${id}`} 
//             className={'item' + (active ? ' active' : '')}
//             draggable="true"
//         >
//             <header className="item-header">
//                 <span className="item-header-username">{username}</span>
//                 <span className="item-header-point">{point}</span>
//             </header>
//             <main className="item-main">{title}</main>
//         </div>
//     );

// }


  
const STATUS_TODO = 'STATUS_TODO';
const STATUS_DOING = 'STATUS_DOING';
const STATUS_DONE = 'STATUS_DONE';

const STATUS_CODE = {
    STATUS_TODO: '待处理',
    STATUS_DOING: '进行中',
    STATUS_DONE: '已完成'
}
let tasks = [{
    id: 0,
    status: STATUS_TODO,
    title: '每周七天阅读五次，每次阅读完要做100字的读书笔记',
    username: '小夏',
    point: 10
}, {
    id: 1,
    status: STATUS_TODO,
    title: '每周七天健身4次，每次健身时间需要大于20分钟',
    username: '橘子🍊',
    point: 5
}, {
    id: 2,
    status: STATUS_TODO,
    title: '单词*100',
    username: '┑(￣Д ￣)┍',
    point: 2
}, {
    id: 3,
    status: STATUS_TODO,
    title: '单词*150',
    username: '┑(￣Д ￣)┍',
    point: 2
}, {
    id: 4,
    status: STATUS_TODO,
    title: '单词*200',
    username: '┑(￣Д ￣)┍',
    point: 2
}, {
    id: 5,
    status: STATUS_TODO,
    title: '单词*250',
    username: '┑(￣Д ￣)┍',
    point: 2
}]


export default class TaskItem extends React.Component{
  
    handleDragStart = (e) => {
        this.props.onDragStart(this.props.id);
    }

    
    render () {

        let { id, title, point, username, active, onDragEnd } = this.props;

        return (
            <div 
                onDragStart={this.handleDragStart}
                onDragEnd={onDragEnd}
                id={`item-${id}`} 
                className={'item' + (active ? ' active' : '')}
                draggable="true"
            >
                <header className="item-header">
                    <span className="item-header-username">{username}</span>
                    <span className="item-header-point">{point}</span>
                </header>
                <main className="item-main">{title}</main>
            </div>
        );
    
    }
}